<template>
  <view class="title">{{ title }}</view>
  <rich-text class="content" :nodes="nodes" />
</template>

<script setup>
import { watchEffect, ref } from "vue";

const props = defineProps({
  title: String,
  message: String,
});

let nodes = ref(null);

// 控制小程序中图片大小
function formatRichText(html) {
  let newContent = "";
  newContent = html.replace(/<img[^>]*>/gi, function (match) {
    match = match.replace(/style="[^"]+"/gi, "").replace(/style='[^']+'/gi, "");
    match = match.replace(/width="[^"]+"/gi, "").replace(/width='[^']+'/gi, "");
    match = match
      .replace(/height="[^"]+"/gi, "")
      .replace(/height='[^']+'/gi, "");
    return match;
  });
  newContent = newContent.replace(/style="[^"]+"/gi, function (match) {
    match = match
      .replace(/width:[^;]+;/gi, "max-width:100%;")
      .replace(/width:[^;]+;/gi, "max-width:100%;");
    return match;
  });
  newContent = newContent.replace(/<br[^>]*\/>/gi, "");
  newContent = newContent.replace(
    /\<img/gi,
    '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"'
  );
  return newContent;
}

watchEffect(() => {
  nodes.value = formatRichText(decodeURIComponent(props.message));
});
</script>

<style>
page {
  background: #fff;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
}
</style>
<style lang="scss" scoped>
.title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}
.content {
  font-size: 28rpx;
  font-weight: 400;
  color: #333;
}
</style>
